window.onload = function () {


    //MutationObserver：监听DOM变化
    const targetElement = document.getElementById('target-element');
    const mutationObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList') {
                console.log('子节点变化:', mutation.addedNodes, mutation.removedNodes);
            } else if (mutation.type === 'attributes') {
                console.log(`属性 ${mutation.attributeName} 被修改为:`, targetElement.getAttribute(
                    mutation.attributeName));
            }
        });
    });

    mutationObserver.observe(targetElement, {
        attributes: true, // 监听属性变化
        childList: true, // 监听子节点变化
        subtree: true, // 监听后代节点
        attributeOldValue: true // 记录旧属性值
    });

    //-----测试按钮
    document.getElementById('add-node').addEventListener('click', () => {
        const newNode = document.createElement('p');
        newNode.textContent = '新添加的子节点';
        targetElement.appendChild(newNode);
    });

    document.getElementById('change-attr').addEventListener('click', () => {
        targetElement.setAttribute('data-example', Math.random().toFixed(2));
    });

    //ResizeObserver：监听元素尺寸变化
    const observedElement = document.getElementById('observed-element');
    const resizeObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
            const {
                width,
                height
            } = entry.contentRect;
            document.getElementById('size-info').textContent =
                `当前尺寸: ${width.toFixed(0)}px × ${height.toFixed(0)}px`;
            console.log('元素尺寸变化:', width, height);
        });
    });
    resizeObserver.observe(observedElement);

    document.getElementById('resize-btn').addEventListener('click', () => {
        observedElement.style.width = `${Math.random() * 300 + 100}px`;
        observedElement.style.height = `${Math.random() * 200 + 50}px`;
    });

    //PerformanceObserver：监听性能指标
    const performanceObserver = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
            console.log(`性能指标 [${entry.entryType}]:`, entry);
        });
    });
    performanceObserver.observe({
        entryTypes: ['paint', 'resource']
    });

    //ReportingObserver：监听报告（如CSP违规）
    const reportingObserver = new ReportingObserver(reports => {
        reports.forEach(report => {
            console.warn(`报告类型 [${report.type}]:`, report.body);
        });
    }, {
        types: ['deprecation', 'intervention']
    });
    reportingObserver.observe();

    //被动事件监听器（优化滚动性能）
    const scrollArea = document.getElementById('scroll-area');
    scrollArea.addEventListener('scroll', () => {
        console.log('滚动位置:', scrollArea.scrollTop);
    }, {
        passive: true
    }); // 声明为被动事件

    // 模拟一个将被弃用的API调用（触发ReportingObserver）
    setTimeout(() => {
        console.log('模拟弃用API调用:');
        const deprecatedAPI = performance.timing || {};
        deprecatedAPI.navigationStart;
    }, 2000)
}
